<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
        
            class Toggle extends React.Component{

                constructor(props) {
                    super(props)
                    this.state = {
                        isToggleOn:true
                    };

                    // 这个绑定是必要的，使`this`在回调中起作用
                    this.handleClick = this.handleClick.bind(this);
                }

                handleClick(){
                    this.setState((preState,props)=>({
                        isToggleOn: !preState.isToggleOn
                    });
                }
                
                render(){
                    return (
                        <button onClick={this.handleClick}>
                            {this.state.isToggleOn ? 'ON' : 'OFF'}
                        </button>
                    );
                }
            }

            ReactDOM.render(
               <Toggle />, document.getElementById('root') 
            )

    </script>
  </body>
</html>